<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>

  </title>
  <style>
    .music-item {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .music-item img {
      max-width: 100px;
      margin-right: 20px;
    }

    .music-item button {
      margin-top: 10px;
    }

    #playerControls {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    input[type=range] {
      width: 100px;
    }
  </style>

</head>
<body>
<h1>stack—music</h1>
<div>
  <input type="text" id="searchInput" placeholder="Enter song name">
  <button onclick="search()">搜索</button>
</div>

<audio id="audio" controls preload="none"></audio>
<div id="playerControls">
  <button onclick="playAudio()">播放</button>
  <button onclick="pauseAudio()">暂停</button>
  <input type="range" min="0" max="100" value="50" oninput="setVolume(this.value)">
  <progress id="progressBar" max="100" value="0"></progress>
</div>

<div id="music-list"></div>

<script>
  function fetchMusicData(keyword) {
    // ...省略原有代码...
  }

  function displayMusicDetails(music) {
    // ...省略原有代码...
  }

  function playMusic(url) {
    // ...省略原有代码...
  }

  function downloadMusic(url) {
    // ...省略原有代码...
  }

  function search() {
    // ...省略原有代码...
  }

  const audioElement = document.getElementById('audio');
  let isPlaying = false;

  function playAudio() {
    if (!isPlaying) {
      audioElement.play();
      isPlaying = true;
    }
  }

  function pauseAudio() {
    if (isPlaying) {
      audioElement.pause();
      isPlaying = false;
    }
  }

  function setVolume(volume) {
    audioElement.volume = volume / 100;
  }

  audioElement.addEventListener('timeupdate', () => {
    const progress = (audioElement.currentTime / audioElement.duration) * 100;
    document.getElementById('progressBar').value = progress;
  });
</script>
</body>
</html>
